<template>
  <el-form ref="dataForm" :rules="rules" :model="dialog.data" label-position="right" label-width="80px"
           style="width: 400px; margin-left:50px;" :class="{animated:shake,shake:shake}">
    <el-form-item label="权限名称" prop="name">
      <el-input v-model="dialog.data.name" title="提示"></el-input>

    </el-form-item>


    <el-form-item label="父级权限" prop="pid">
      <el-select v-model="dialog.data.pid"
                 placeholder="请选择"
                 filterable
                 remote=""
                 default-first-option
                 :loading="searchLoad"
                 :remote-method="parentPermissionFilter"
      >
        <el-option
          v-for="item in parPermissionOpt"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="权限类型" prop="type">
      <el-select v-model="dialog.data.type" placeholder="请选择">
        <el-option
          v-for="item in typeOpt"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="访问路劲" prop="path">
      <el-input v-model="dialog.data.path" placeholder="顶级菜单加/ 次级菜单不要加/">

      </el-input>
    </el-form-item>

    <el-form-item label="组件路劲" prop="component">
      <el-input v-model="dialog.data.component" placeholder="/src/views/需要输入的路劲">

      </el-input>
    </el-form-item>

    <el-form-item label="图标" prop="icon">
      <el-input v-model="dialog.data.icon" style="display: none"></el-input>
      <el-popover
        placement="right"
        title="请选图案"
        width="965"

        trigger="click"
        visible-arrow
        v-model=showPopover>
        <el-button-group>

          <el-button type="primary" v-for="item in icon" :key="item" :icon="item" @click="selectIcon(item)" size="medium "></el-button>

        </el-button-group>
        <el-button slot="reference" :icon="dialog.data.icon">{{dialog.data.icon}}</el-button>
      </el-popover>
    </el-form-item>

    <el-form-item label="顺序" prop="orders">
      <el-input-number v-model="dialog.data.orders" controls-position="right"  :min="1" :max="99"></el-input-number>
      <svg-icon icon-class="el-icon-warning"></svg-icon>
    </el-form-item>

    <el-form-item label="备注" prop="remark">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="dialog.data.remark">
      </el-input>
    </el-form-item>

    <el-form-item label="可用状态" prop="status">
      <el-switch
        v-model="dialog.data.status"
        active-text="正常"
        inactive-text="禁用"
        :active-value=1
        :inactive-value=0>
      </el-switch>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSubmit" :disabled="submitButton">保存</el-button>
      <el-button  @click="onCancel">取消</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
  import { GetPermissionLikeName ,SavePermission,GetPersimmonName} from '@/api/sysPersimmon'
  import { GetSystemAll, GetSystemLikeName } from '@/api/sysSystem'
  import myIcon from '@/assets/icon/icon'

  export default {
    name: 'dialogPermission',
    props: ['dialog','dataServer'],
    mounted() {
      const that = this


      GetPersimmonName('').then(res => {
        that.parPermissionOpt = res.data.map(response => {
          return { value: response.id, label: response.name }
        })

        that.parPermissionOpt.unshift({value: 0, label: '请选择'})
      })

    },
    data() {
      return {
        submitButton:false,
        shake:false,
        searchLoad: false,
        showPopover: false,
        sysSystemOpt: [],
        parPermissionOpt: [],
        typeOpt: [
          { value: 1, label: '头部导航' },
          { value: 2, label: '父级菜单' },
          { value: 3, label: '子级菜单' },
          { value: 4, label: '按钮' },
        ],
        rules: {
          name: [
            { required: true, message: '请输入权限名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          pid: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          path: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          conmpont:[
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          icon: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          orders: [
            { type: 'number', message: '年龄必须为数字值'}
          ]
        },
        icon: myIcon
      }
    },
    methods: {
      systemOptFilter(queryString) {
        const that = this
        this.searchLoad = true
        this.sysSystemOpt = []
        GetSystemLikeName(queryString).then(res => {
          this.searchLoad = false
          that.sysSystemOpt = res.data.map(role => {
            return { value: role.id, label: role.name }
          })
        }).then(res => that.searchLoad = false)
      },
      parentPermissionFilter(queryString) {
        const that = this
        this.searchLoad = true
        this.parPermissionOpt = []

        GetPersimmonName(queryString).then(res => {
          this.searchLoad = false
          that.parPermissionOpt = res.data.map(role => {
            return { value: role.id, label: role.name }
          })
        }).then(res => {
          that.parPermissionOpt.unshift({value: 0, label: '无'})
          that.searchLoad = false
        })
      },
      selectIcon(icon) {
        this.dialog.data.icon = icon
        this.showPopover = false
      },
      onSubmit(){
        new Promise(resolve => {
          this.shake=false
          this.submitButton=true
          let flag;
          this.$refs.dataForm.validate((valid) => {
            if (valid) {
              SavePermission(this.dialog.data).then(res=>{
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.dialog.dialogVisible=false
                this.$emit('search')
              })
              flag=true
            }else {
              this.$message({
                message: '验证未通过',
                type: 'error'
              })
              flag=false
            }
          })
          resolve(flag)
        }).then((res)=>{
          console.log('res',res)
          if (!res){
            this.shake=true
          }
          this.submitButton=false

        })



      },
      onCancel(){
        if (this.dialog.data.id){
          console.log('this.dialog.thatDialogData',this.dialog.thatDialogData)
          // this.dialog.data={...this.dialog.thatDialogData}
          // this.dataServer.splice(this.dialog.thatRow,1,this.dialog.thatDialogData)
          Object.keys(this.dialog.data).forEach(key=>{
            this.dialog.data[key]=this.dialog.thatDialogData[key]
          })

        }
        this.dialog.dialogVisible=false
      }
    }
  }
</script>

<style scoped>

</style>
